<template>
  <div>
  <el-input placeholder="请输入内容" v-model="input1">
    <template #prepend>Http://</template>
  </el-input>
</div>
<div style="margin-top: 15px">
  <el-input placeholder="请输入内容" v-model="input2">
    <template #append>.com</template>
  </el-input>
</div>
<div style="margin-top: 15px">
  <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
    <template #prepend>
      <el-select v-model="select" placeholder="请选择">
        <el-option label="洗衣机" value="1"></el-option>
        <el-option label="冰箱" value="2"></el-option>
        <el-option label="空调" value="3"></el-option>
      </el-select>
    </template>
    <template #append>
      <el-button icon="el-icon-search"></el-button>
    </template>
  </el-input>
</div>
</template>
<script>
  import { defineComponent, ref } from 'vue'

  export default defineComponent({
    setup() {
      return {
        input1: ref(''),
        input2: ref(''),
        input3: ref(''),
        select: ref(''),
      }
    },
  })
</script>
<style>
  .el-select .el-input {
    width: 130px;
  }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
</style>
